<template>
	<view class="user-box">
		<view class="header-top" v-if="isLogin">
			<view class="avatar-nav">
				<image class="avatars" v-if="userInfo.icon" :src="userInfo.icon" mode="aspectFit"></image>
				<u-avatar text="物流园" v-else size="70" fontSize="14" randomBgColor></u-avatar>
			</view>
			<view class="label-name">
				{{userInfo.nickname}}
				<view class="btn-list" :class="{admin:userInfo.role===2,shop:userInfo.role===3}">
					<u-icon size="16" color="#fff" name="level"></u-icon>
					{{userInfo.role===1 ? '普通用户':userInfo.role===2 ? '管理员':'其他用户'}}
				</view>
			</view>
			<view class="level">
				<text class="phone">{{userInfo.ownerPhone}}</text>
				<view class="hr"></view>
				<text class="phone">{{userInfo.plateNumber}}</text>
			</view>
		</view>
		<view class="header-top" v-else>
			<view class="avatar-nav">
				<u-avatar text="物流园" size="70" fontSize="14" randomBgColor></u-avatar>
			</view>
			<view class="label-name" @click="nextPage('/pages/login/index')">
				<view class="btn">
					立即登录
				</view>
			</view>

		</view>
		<view class="btn-box-bottom">
			<view class="titles" v-if="active">{{list[active].label}}</view>
			<view class="nav-label" v-if="active" v-for="(item,index) in active ? list[active].children : []"
				:key="item.name" @click="toRouterForm(index)">
				<view class="left-name">
					<u-icon size="18" color="#333" :name="item.icon"></u-icon>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="right-label">
					<u-icon size="18" color="#333" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="titles" style="margin-top: 40rpx;">基础功能</view>

			<view class="nav-label" @click="toRouter(item)" v-for="(item,index) in list[0].children" :key="index">
				<view class="left-name">
					<u-icon size="18" color="#333" :name="item.icon"></u-icon>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="right-label">
					<u-icon size="18" color="#333" name="arrow-right"></u-icon>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {},
				carNum: 0,
				auditForm: {
					storeCount: 0,
					claimCount: 0,
					install: 0
				},
				active: 1,
				list: [{
						label: "普通用户",
						children: [{
								name: "预约订单",
								icon: "level",
								to: "/appoint/history/index",
								auth: 1
							},
							{
								name: "关于我们",
								icon: "share",
								to: "/setting/about/index",
								auth: 0
							},
							{
								name: "公司简介",
								icon: "question-circle-fill",
								to: "/setting/company/index",
								auth: 0
							},
							{
								name: "隐私协议",
								icon: "file-text-fill",
								to: "/setting/agreement/index",
								auth: 0
							},
							{
								name: "设置",
								icon: "setting",
								to: "/setting/index",
								auth: 0
							},
						]
					},
					{
						label: "工作人员",
						children: [{
								name: "预约排号",
								icon: "tags-fill",
								to: "/setting/queue/index",
								auth: 1
							},

							{
								name: "车辆补录",
								icon: "grid",
								to: "/setting/confirm/index",
								auth: 1
							},

						]
					},
					{
						label: "门店管理员",
						children: [{
								name: "鼓包更换",
								icon: "scan",
								to: "",
								auth: 1
							},

						]
					},

				]
			}
		},
		methods: {
			nextPage(item) {
				uni.navigateTo({
					url: item
				})
			},
			toRouter(item) {
				let token = uni.getStorageSync('carInfo')
				if (item.auth === 1 && token) {
					uni.navigateTo({
						url: item.to
					})
					return
				}
				if (item.auth === 0) {
					uni.navigateTo({
						url: item.to
					})
					return
				}
				if (item.auth === 1 && !token) {
					uni.showModal({
						title: '提示',
						content: '当前还没有登录，是否前往登录？',
						showCancel: true, // 是否显示取消按钮
						cancelText: '取消', // 取消按钮的文字
						cancelColor: '#000000', // 取消按钮的颜色
						confirmText: '确定', // 确定按钮的文字
						confirmColor: '#3CC51F', // 确定按钮的颜色
						success: (res1) => {
							if (res1.confirm) {
								uni.navigateTo({
									url: "/pages/userPage/login/index"
								})
							} else if (res1.cancel) {
								console.log('用户点击了取消')
							}
						},
						fail: (err) => {
							console.log('调用失败', err);
						}
					});
				}

			},
			scanCodeHandler() {
				let that = this;

				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode', 'barCode'],
					autoZoom: false,
					success: function(res) {

						that.parseQRCode(res);

					},
					fail: function(err) {

					},
					complete: function(data) {

					}
				});
			},
			// 解析二维码，处理业务
			parseQRCode(data) {
				uni.vibrateShort(); // 震动提示
				console.log(data.result)
				// this.getCodeInfo(data.result)
				uni.navigateTo({
					url: '/adminPage/claim_admin/replace?id=' + data.result
				})
			},
			toRouterForm(index) {
				if (this.list[this.active].children[index].to) {
					uni.navigateTo({
						url: this.list[this.active].children[index].to
					})
				} else {
					this.scanCodeHandler()
				}

			},
			getAuditNum() {
				totalThreeInfo().then(res => {
					this.auditForm = res
				})
			},
			getBaseInfo() {
				console.log(this.$store.state.user.driverInfo.id)
				let userId = this.$store.state.user.driverInfo.id
				this.$store.dispatch('GetInfo', userId).then(res => {
					console.log(res)
				}).catch(err => {})

				let user = uni.getStorageSync('storage_data')
				console.log(user)
				this.userInfo = user.driver_info

			},
			// 获取车辆信息
			getCarList() {
				getCarSummarizeInformation().then(res => {
					console.log(res)
					this.carNum = res.length ? res.length : 0
				}).catch(err => {})
			},
		},
		onShow() {
			let token = uni.getStorageSync('storage_data')
			if (token) {
				this.isLogin = true
				this.getBaseInfo()
			} else {
				this.userInfo = {}
				this.active = null
				this.auditForm = {
					storeCount: 0,
					claimCount: 0,
					install: 0
				}
				this.carNum = 0
				this.isLogin = false
				uni.showModal({
					title: '提示',
					content: '当前未登录，请登录后使用',
					confirmText: '去登录',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/index'
							})
						}
					}
				})

			}
		},
		updated() {
			console.log('update')
		}
	}
</script>

<style lang="scss" scoped>
	.user-box {
		width: 100%;
		min-height: 100vh;

		.header-top {
			width: 100%;
			height: 500rpx;
			background-image: linear-gradient(to bottom, #f2cea5 0%, white 100%);
			padding-top: 124rpx;
			box-sizing: border-box;

			.avatar-nav {
				width: 100%;

				display: flex;
				justify-content: center;

				.avatars {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
			}

			.label-name {
				width: 100%;
				text-align: center;
				font-family: 'Courier New', Courier, monospace;
				font-size: 32rpx;
				color: #333;
				margin-top: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.btn-list {
					width: 140rpx;
					height: 38rpx;
					background: #d49033;
					border-radius: 30rpx 10rpx 30rpx 10rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.admin {
					background: #ffc913;
				}

				.shop {
					background: #e14fad;
				}
			}

			.level {
				width: 100%;
				color: #000;
				display: flex;
				justify-content: center;
				margin-top: 10rpx;
				align-items: center;

				.phone {
					font-size: 24rpx;
					color: #333;
					font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
				}

				.hr {
					width: 1px;
					height: 24rpx;
					background: #666;
					margin: 0 10rpx;
				}
			}

			.btn {
				width: 260rpx;
				height: 70rpx;
				margin-top: 20rpx;
				background: #e09625;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #fff;
			}
		}

		.btn-box-bottom {
			width: 100%;
			min-height: 600rpx;
			background: #fff;
			border-radius: 40rpx 40rpx 0 0;
			margin-top: -80rpx;
			padding: 40rpx;
			box-sizing: border-box;

			.titles {
				width: 100%;
				font-size: 36rpx;
				color: #000;
				font-weight: 800;
				margin-bottom: 20rpx;
			}

			.nav-list {
				width: 100%;
				height: 140rpx;
				// border: 1px solid #f8f8f8;
				background: #fff;
				margin-bottom: 50rpx;
				border-radius: 10rpx;
				box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
				display: grid;
				gap: 10px;
				grid-template-columns: repeat(4, 1fr);
				align-items: center;
				position: relative;
				padding-left: 70rpx;
				box-sizing: border-box;

				.images {
					height: 80rpx;
					width: 100rpx;
					position: absolute;
					top: 20rpx;
				}

				.item {
					width: 180rpx;
					height: 140rpx;
					padding: 20rpx 0;
					box-sizing: border-box;
					// margin-left: -30rpx;

					.number {
						text-align: center;
						width: 100%;
						font-size: 40rpx;
						color: cadetblue;
						font-weight: 600;
						font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

						.util {
							font-size: 20rpx;
						}
					}

					.label {
						width: 100%;
						font-size: 22rpx;
						color: #666;
						margin-top: 8rpx;
						text-align: center;
						font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
					}
				}
			}

			.nav-label {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px #f7f7f7 dashed;
				margin-bottom: 10rpx;
				padding: 15rpx 0;

				.left-name {
					width: 50%;
					height: 80rpx;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					width: 100%;
					height: 80rpx;

					.name {
						color: #333;
						margin: 0 10rpx;
					}
				}

				&:nth-last-child(1) {
					border-bottom: none;
				}

			}
		}
	}
</style>